<!--全局成功提醒 -->
<template>
  <div v-if="Visible" class="loader">
    <div class="loader-inner line-scale">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="loader-text">{{successText}}</div>
  </div>

</template>

<script>
import { debounce } from '@/utils/func.js'
export default {
  data() {
    return {
      Visible:false,
      successText:this.$t('MessageLoadingLang.text'),
      loadingCount:0
    };
  },
  created(){
    },
  mounted() {
    eventBus.$on("Loading",data=>{
      if(data){
        this.addLoading()
      }else{
        this.removeLoading()
      }
    });
  },
  watch:{
    Visible(){
      this.debounceFun()
      // setTimeout(()=>{
      //   if(!!this.Visible){
      //     console.log(this.Visible,this.loadingCount)
      //     this.loadingCount=0
      //     this.Visible=false
      //     // this.$notify({
      //     //   title: this.$t('main.error_title'),
      //     //   message: this.$t('main.error_contant'),
      //     //   type: 'warning',
      //     //   duration:3000
      //     // });
      //   }
      // },300000)
    }
    
  },
  methods: {
    //函数防抖（当不触发后n秒后执行）
    debounceFun:debounce(function(){
      if(!!this.Visible){
        this.loadingCount=0
        this.Visible=false
        this.$notify({
          title: this.$t('main.error_title'),
          message: this.$t('main.error_contant'),
          type: 'warning',
          duration:3000
        });
      }
    }, 300000),
    addLoading(){
      this.Visible=true
      this.loadingCount++
    },
    removeLoading(){
      this.loadingCount--
      if(this.loadingCount<=0){
        this.loadingCount=0
      }
      if(this.loadingCount==0){
        this.Visible=false
      }
    },
  },
};
</script>

<style scoped lang="less" >
.loader{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    background-color: #000;
    z-index: 100000;
    opacity: 0.5;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}
.loader-text{
  color: #fff;
  margin-top: 12px;
}
.line-scale>div {
    background-color: #fff;
    width: 4px;
    height: 40px;
    border-radius: 2px;
    margin: 3px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block;
}
@-webkit-keyframes line-scale {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }
 
  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }
 
  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }
@keyframes line-scale {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }
 
  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }
 
  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }

.line-scale>div:nth-child(1) {
        -webkit-animation: line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08);
        animation: line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.line-scale>div:nth-child(2) {
        -webkit-animation: line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08);
        animation: line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.line-scale>div:nth-child(3) {
        -webkit-animation: line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08);
        animation: line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.line-scale>div:nth-child(4) {
        -webkit-animation: line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08);
        animation: line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.line-scale>div:nth-child(5) {
        -webkit-animation: line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08);
        animation: line-scale 1s 0.5s cubic-bezier(.2, .68, .18, 1.08) infinite;
}
</style>